<!DOCTYPE html>
<html>
<head>
	<title>jsAsteroids</title>
	<link href="../../depends/demos.css" rel="stylesheet">
	<script src="../../depends/demos.js"></script>

	<script src="../../depends/jquery.js"></script>
	<script src="../../depends/jquery.mousewheel.js"></script>

	<script src="../../lina.js/lina.js"></script>
	<script src="../../arcade.js/arcade.js"></script>

	<script src="jsAsteroids.js"></script>

	<script type="text/javascript">
	$(function(){
		// Initialize the game
		var canvas = document.getElementById("canvas1");
		var game = new AsteroidsGame(canvas);
		// Install handlers for the debug ccontrols on this pages
		initArcadeGameDebugControls(game);
	});
	</script>
</head>
<body>
<h1>jsAsteroids</h1>
<div class="info">
<p>
	A JavaScript implementation of the Asteroids game using
	<a href="http://arcade-js.googlecode.com/">arcade.js</a>
	(<a href="source.html">view the source</a> to learn more).
</p>
<p>
Use <kbd>[left]</kbd>, <kbd>[right]</kbd>, and <kbd>[up]</kbd> to move the ship.<br>
<kbd>[space]</kbd> to fire.
</p>
</div>

<p>
<canvas class="demo" id="canvas1">This game requires HTML 5 support.</canvas>
</p>
<div class="debugPane">
	<input type="checkbox" id="cbDebug" value="1"><label for="cbDebug">Show debug info</label>
	<input type="checkbox" id="cbLogToCanvas" value="1"><label for="cbLogToCanvas">Log to canvas</label>
	<input type="checkbox" id="cbMaxFps" value="1"><label for="cbMaxFps">Maximum frame rate</label>
	<input type="checkbox" id="cbTimeCorrection" value="1"><label for="cbTimeCorrection">Time correction</label>
	<br>
	<input type="radio" name="rbStepmode" id="rbStepmode1" value="loop"><label for="rbStepmode1">Render loop</label>
	<input type="radio" name="rbStepmode" id="rbStepmode2" value="freeze"><label for="rbStepmode2">Freeze</label>
	<input type="radio" name="rbStepmode" id="rbStepmode3" value="stop"><label for="rbStepmode3">Stop</label>
	<button id="btnStep">Single step</button>
</div>
</body>
</html>
